<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th>角色编号</th>
                <th>角色名称</th>
                <th>角色描述</th>
                <th>包含员工</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="r in roles">
                <td>{{r.roleId}}</td>
                <td>{{r.roleName}}</td>
                <td>{{r.roleDesc}}</td>
                <td>
                    <table>
                        <tr v-for="u in r.users">
                            <td>{{u.id}}</td>
                            <td>{{u.username}}</td>
                            <td>{{u.address}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                roles:[]
            }
        },
        created(){
          this.findAll()
        },
        methods: {
            async findAll(){
                let {data:res} = await axios({
                    url:"role/findAll"
                })
                this.roles = res.data;
            }
        }
    })
    app.mount("#app")
</script>
</html>